<template>
  <view class=''>
	<view class="top-background">
		<view class="background-title">
			<view class="title-left">
				<image class="address-icon" src="../../static/chooseShop/dingwei.png"></image>
				<view class="text" style="margin-left: 3px;">{{currentMerchant?currentMerchant.name:'未选择'}}</view>
				<!-- <image class="arrow" src="../../static/chooseShop/jiantou-xia-bai.png"></image> -->
			</view>
			<view class="title-right">
				<!-- <image src="../../static/chooseShop/sousuo.png"></image>
				<image class="address-icon" src="../../static/chooseShop/message.png"></image> -->
			</view>
			<view class="content" @click="getAddressNameByWxMap">
				<view class="title">
					<text>当前位置</text>
					<image style="margin-left: 5px;" class="address-icon" src="../../static/chooseShop/jiantou-xia.png"></image>
				</view>
				<view class="desc">{{address?address:'未选择'}}</view>
			</view>
		</view>
	</view>
	<view class="currnet-shop">
		<view class="title">当前门店</view>
		<view class="shop-item" v-if="currentMerchant" @click="backIndex">
			<view class="item-left">
				<!-- <image :src="currentMerchant.thumb_url?item.thumb_url:errImgUrl"></image> -->
				<image mode="widthFix" :src="currentMerchant.logo_img_url"></image>
				<view class="item-left-detail">
					<view class="name">{{currentMerchant.name}}</view>
					<!-- <view class="buy-count">15w人已买</view> -->
					<view class="start-time">
						<text>营业时间: {{currentMerchant.business_start_time}}-{{currentMerchant.business_end_time}}</text>
						<!-- <text style="margin-left: 8px;">配送3元</text> -->
					</view>
					<view class="buy-count">联系方式：{{currentMerchant.contact}}</view>
					<view class="address-sty">{{currentMerchant.address}}</view>
				</view>
			</view>
			<view class="item-right">{{currentMerchant.distance}}</view>
		</view>
	</view>

	<view class="currnet-shop">
		<view class="title">附近门店</view>
		<view class="shop-item" v-for="(item,index) in merchantList" :key="index" @click="chooseMerchant(index)">
			<view class="item-left">
				<!-- <image :src="item.medicine_info.thumb_url?item.medicine_info.thumb_url:errImgUrl"></image> -->
				<image mode="widthFix" :src="item.logo_img_url"></image>
				<view class="item-left-detail">
					<view class="name">{{item.name}}</view>
					<view class="start-time">
						<text>营业时间: {{item.business_start_time}}-{{item.business_end_time}}</text>
						<!-- <text style="margin-left: 8px;">配送3元</text> -->
					</view>
					<view class="buy-count">联系方式：{{item.contact}}</view>
					<view class="address-sty">{{item.address}}</view>
				</view>
			</view>
			<view class="item-right">{{item.distance}}</view>
		</view>
		<view class="null" v-if="!isGetLocation" @click="getLocationInfo">获取位置失败，点击刷新</view>
		<view class="null" v-if="isGetLocation">
			<u-loadmore color='#B5B5B5' :status="loadingStatus" :icon-type="iconType" :load-text="loadText" />
		</view>
	</view>

	<view v-if="layerModel" class="modal-mask">
	    <view class="modal-dialog">
	      <view class="modal-title">温馨提示</view>
	      <view class="modal-content">
	        获取定位失败，请前往设置打开定位权限
	      </view>
	      <view class="modal-footer">
	        <view class="btn-cancel" @click="layerModel = false">取消</view>
	        <button open-type="openSetting" class="btn-confirm">设置</button>
	      </view>
	    </view>
	  </view>


  </view>
</template>

<script>
  export default{
    name:'chooseShop',
    data(){
      return {
        merchantList: [],
		currentMerchant: '',
		layerModel: false,
		isGetLocation: true,
		address: '',
		errImgUrl: this.$errorImgUrl,
		isChooseMap: false,//判断有没有通过地图选择
		page: 1,
		total: 0,
		loadingStatus: 'loading',
		iconType: 'flower',
		loadText: {
			loadmore: '轻轻上拉',
			loading: '努力加载中',
			nomore: '没有更多了'
		},
      }
    },
	onReachBottom() {
		if(this.loadingStatus=="loading"||this.total==this.merchantList.length){
			return
		}
		this.page = this.page+1;
		this.getMerchantList();
	},
    methods:{
      //获取店铺列表
      async getMerchantList() {
		//通过存储在本地的经纬度判断是否已经选择地址
		let latitude = wx.getStorageSync("latitude")
		let longitude = wx.getStorageSync("longitude")
		if(latitude&&longitude){
			this.address = wx.getStorageSync("user_address")
		} else{
			this.getLocationInfo()
			return
		}

		this.loadingStatus = 'loading';
        let userToken=wx.getStorageSync('userToken')
        let res = await this.$api.getMerchantList({
			lng: longitude,
			lat: latitude,
			page: this.page,
			limit: 10,
			merchant_id: wx.getStorageSync("share_merchant_id")
		},this.$baseUrl)
        if (res.data.level == 'success') {
		  if(this.page == 1){
		  	this.merchantList = res.data.data;
			this.getCurrentMerchant()
		  } else{
		  	if(res.data.data.length == 0){
		  	    this.page--;
		  	} else{
		  	    this.merchantList = this.merchantList.concat(res.data.data)
		  	}
		  }
		  this.total = res.data.page_info.total;
		  //loading状态
		  if(this.merchantList.length==this.total){
		  	this.loadingStatus = 'nomore'
		  } else{
		  	this.loadingStatus = 'loadmore'
		  }
        } else {
          wx.showToast({
			  title: res.data.message,
			  icon: 'none',
			  duration: 1500
		  })
        }
      },

	  //选择店铺
	  chooseMerchant(index) {
		wx.setStorageSync("merchant",this.merchantList[index])
		this.$store.dispatch('setMerchant',this.merchantList[index])
		wx.switchTab({
			url: '../index/index'
		})
	  },

	  //返回首页
	  backIndex() {
		wx.switchTab({
			url: '../index/index'
		})
	  },

	  //获取当前商店
	  async getCurrentMerchant() {
		  let tempMerchant = wx.getStorageSync("merchant")

		  //如果之前没有选择门店的话 那么应该选择列表的第一个
		  if(!tempMerchant.merchant_id){
			  if(this.merchantList.length>0){
				  wx.setStorageSync("merchant",this.merchantList[0])
			  }
		  }
		  this.currentMerchant = wx.getStorageSync("merchant");
	  },

	  //通过地图接口获取地址名称
	  async getAddressNameByApi(latitude,longitude){
	     let res=await this.$api.getLocationInfos({
	        location: latitude + "," + longitude,
	        key: "THNBZ-EIYCQ-CZB5B-G5SZG-DQFWV-4GBYY"
	     });
	     if(res.data.status== 0){
	  		console.log(res.data.result.address)
	        this.address = res.data.result.address;
	        wx.setStorageSync('user_address',this.address);
	     } else{
	        uni.showToast({
	           title: res.data.message,
	           duration: 1500
	        })
	     }
	  },

	  //通过微信地图选择地址名称并选择经纬度
	  getAddressNameByWxMap() {
		let _this = this;
		wx.chooseLocation({
		  success: function (res) {
		    _this.address = res.name;
			wx.setStorageSync("latitude",res.latitude)
			wx.setStorageSync("longitude",res.longitude)
			wx.setStorageSync('user_address',_this.address);
			_this.page = 1;
		  },
		  fail: function (err) {
			wx.getSetting({
				success: (res) => {
				    if (!res.authSetting['scope.userLocation']) {
						//打开提示框，提示前往设置页面
						_this.layerModel = true;
				    }
				}
			})
		  }
		});
	  },

	  //通过微信获取经纬度
	  getLocationInfo() {
		let _this = this;
		wx.getLocation({
		    type: 'gcj02',
		    success(res) {
				_this.isGetLocation = true;
				wx.setStorageSync("latitude",res.latitude)
				wx.setStorageSync("longitude",res.longitude)
		    	_this.getMerchantList();
				_this.getAddressNameByApi(res.latitude,res.longitude)
		    },
			fail(err){
				_this.isGetLocation = false;
				wx.getSetting({
					success: (res) => {
					    if (!res.authSetting['scope.userLocation']) {
							//打开提示框，提示前往设置页面
							_this.layerModel = true;
					    } else{
							wx.showToast({
								title: '请检查手机位置服务是否打开',
								icon: 'none'
							})
						}
					}
				})
			}
		})
	  }

    },

    onShow(){
		this.getMerchantList();
		/* let latitude = wx.getStorageSync("latitude")
		let longitude = wx.getStorageSync("longitude")
		if(latitude&&longitude){
			this.getMerchantList(latitude,longitude);
			this.address = wx.getStorageSync("user_address")
		} else{
			this.getLocationInfo()
		} */
    },
	onLoad() {

	}
  }
</script>

<style lang="scss" scoped>
	.top-background{
		width: 100vw;
		height: 130px;
		background-image: url(../../static/chooseShop/background.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		position: relative;
		.background-title{
			padding-top: 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title-left{
				/* width: 250px; */
				display: flex;
				align-items: center;
				.address-icon{
					width: 17px;
					height: 19px;
					margin: 0 10px;
				}
				.text{
					width: calc(100% - 25px);
					color: #FFFFFF;
					font-size: 15px;
					font-weight: bold;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				.arrow{
					width: 12px;
					height: 7px;
					margin-left: 8px;
				}
			}
			.title-right{
				display: flex;
				align-items: center;
				image{
					width: 20px;
					height: 20px;
				}
				.address-icon{
					margin: 0 15px;
				}
			}
		}
		.content{
			position: absolute;
			background-color: #FFFFFF;
			border-radius: 15px;
			bottom: -15px;
			left: 50%;
			transform: translateX(-50%);
			max-width: 160px;
			padding: 8px 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width: 10px;
				height: 6px;
			}
			.title{
				display: flex;
				align-items: center;
				text{
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}
			.desc{
				font-size: 12px;
				color: #9EA09F;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin-top: 5px;
			}
		}
	}
	.currnet-shop{
		.title{
			font-size: 17px;
			font-weight: bold;
			padding: 15px;
		}
		.shop-item{
			display: flex;
			align-items: center;
			padding: 10px 0;
			border-bottom: 1rpx solid #EEEEEE;
			.item-left{
				width: 78vw;
				display: flex;
				align-items: center;
				image{
					width: 80px;
					height: 80px;
					margin: 0 10px;
				}
				.item-left-detail{
					width: calc(78vw - 80px);
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.name{
						color: #2B2B2B;
						font-size: 14px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 5;
						overflow: hidden;
					}
					.address-sty{
						font-size: 12px;
						color: #F77A3D;
					}
					.start-time{
						font-size: 12px;
						color: #A7A9A8;
					}
					.buy-count{
						font-size: 12px;
						color: #A7A9A8;
					}
				}
			}
			.item-right{
				padding-right: 5px;
				width: calc(22vw - 5px);
				font-size: 13px;
				color: #9C9D9D;
				text-align: center;
				word-break: break-word;
			}
		}
		.shop-item:last-child{
			border: none;
		}

	}

	.modal-mask {
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    top: 0;
	    left: 0;
	    background-color: rgba(0, 0, 0, 0.5);
	    overflow: hidden;
	    z-index: 999999;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	  }
	  .modal-dialog {
	    width: 540rpx;
	    overflow: hidden;
	    z-index: 999999;
	    background: #f9f9f9;
	    border-radius: 5rpx;
	  }
	  .modal-title {
	    padding-top: 30rpx;
	    font-size: 35rpx;
	    color: #030303;
	    text-align: center;
	  }
	  .modal-content {
	    padding: 30rpx;
	    font-size: 32rpx;
	  }
	  .modal-footer {
	    display: flex;
	    flex-direction: row;
	    height: 86rpx;
	    border-top: 1px solid #dedede;
	    font-size: 35rpx;
	    line-height: 86rpx;
	  }
	  .btn-cancel {
	    width: 50%;
	    color: #abb4bd;
	    text-align: center;
	    border-right: 1px solid #dedede;
	  }
	  .btn-confirm {
	    height: 86rpx;
	    line-height: 86rpx;
	    width: 50%;
	    color: #6fb64b;
	    text-align: center;
	    font-size: 35rpx;
	  }
	  .btn-confirm::after {
	    border: 0 !important;
	}

</style>
